@import '@/uni.scss';
.container {
	width: 100%;
	min-height: 100%;
	padding-bottom: calc(136rpx + env(safe-area-inset-bottom));
	background: $uni-bg-color;
	display: flex;
	flex-direction: column;
	align-items: center;
	.address {
		margin-top: 20rpx;
		width: 690rpx;
		border-radius: 20rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		.title {
			padding: 20rpx 30rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: $uni-secondary-color;
		}
		.info {
			padding: 0 30rpx;
			width: calc(100% - 60rpx);
			.top,
			.bottom {
				width: 100%;
				display: flex;
				flex-direction: row;
				> text {
					font-weight: bold;
					font-size: 36rpx;
					color: $uni-main-color;
				}
			}
			.bottom {
				margin-top: 16rpx;
				margin-bottom: 30rpx;
				> text {
					font-weight: 500;
					font-size: 24rpx;
					color: $uni-base-color;
				}
			}
		}
	}
	.orderInfo {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		width: 690rpx;
		border-radius: 20rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		.status {
			position: absolute;
			top: 0;
			right: 0;
			border: solid 2rpx $xxf-red;
			border-radius: 4rpx;
			color: $xxf-red;
			content: '';
			font-size: 40rpx;
			font-weight: bold;
			line-height: 1;
			padding: 8rpx 16rpx;
			margin: 0 auto;
			text-transform: uppercase;
			opacity: 0;
			transform-origin: 50% 50%;
			transform: rotate(-2deg) scale(5);
			transition: all 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
		}
		.loadedStatus {
			opacity: 0.75;
			transform: rotate(-15deg) scale(1);
			z-index: 1;
		}
		.title {
			padding: 20rpx 30rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: $uni-secondary-color;
		}
		.productItem {
			margin: 10rpx 20rpx;
			width: calc(100% - 40rpx);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.itemLeft {
				background: $uni-bg-color;
				border-radius: 16rpx;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				> image {
					width: 200rpx;
					height: 200rpx;
					margin: 0;
					padding: 0;
				}
			}
			.itemRight {
				padding-left: 20rpx;
				width: calc(100% - 220rpx);
				display: flex;
				flex-direction: column;
				.name {
					width: 100%;
					height: 86rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: $uni-base-color;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					word-break: break-all;
					-webkit-box-orient: vertical;
				}
				.priceNum {
					margin-top: 18rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.price {
						display: flex;
						flex-direction: row;
						align-items: baseline;
						> text {
							font-weight: 400;
							font-size: 24rpx;
							color: $uni-secondary-color;
						}
						> text:nth-child(1) {
							color: $xxf-red;
						}
						> text:nth-child(2) {
							color: $xxf-red;
							font-weight: bold;
							font-size: 28rpx;
							color: $xxf-red;
						}
						> text:last-child {
							text-decoration: line-through;
						}
					}
					.num {
						display: flex;
						flex-direction: row;
						align-items: center;
						> text {
							width: 40rpx;
							height: 38rpx;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: $uni-base-color;
						}
						> text:nth-child(1) {
							border: 2rpx solid #ebebeb;
							font-size: 28rpx;
							position: relative;
						}
						> text:nth-child(1)::before {
							content: '';
							position: absolute;
							top: -10rpx;
							right: -10rpx;
							bottom: -10rpx;
							left: -20rpx;
						}
						> text:nth-child(2) {
							border-top: 2rpx solid #ebebeb;
							border-bottom: 2rpx solid #ebebeb;
						}
						> text:nth-child(3) {
							border: 2rpx solid #ebebeb;
							font-size: 28rpx;
							position: relative;
						}
						> text:nth-child(3)::before {
							content: '';
							position: absolute;
							top: -10rpx;
							right: -20rpx;
							bottom: -10rpx;
							left: -10rpx;
						}
					}
				}
			}
		}

		.infoItem {
			padding: 0 30rpx;
			width: calc(100% - 60rpx);
			height: 58rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.itemLeft {
				font-weight: 400;
				font-size: 24rpx;
				color: $uni-base-color;
			}
			.itemRight {
				font-weight: 400;
				font-size: 28rpx;
				color: $uni-main-color;
			}
			.txtRed {
				color: $xxf-red;
			}
			.txtGold {
				color: $xxf-gold;
			}
			.goldBtn {
				padding: 0 16rpx;
				color: $xxf-gold;
				border: 2rpx solid $xxf-gold;
				border-radius: 30rpx;
			}
		}
	}

	.fixBottom {
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: 136rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		.fbLeft {
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			> text {
				font-weight: 400;
				color: $uni-base-color;
				font-size: 24rpx;
			}
		}
		.fbRight {
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			.actionBtn {
				margin-left: 20rpx;
				width: 156rpx;
				height: 56rpx;
				background: #000;
				border-radius: 34rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				> text {
					font-weight: 400;
					font-size: 26rpx;
					color: #fff;
				}
			}
			.redBtn {
				background: $xxf-red;
			}
			.greenBtn {
				background: $xxf-logo;
			}
			.grayBtn {
				background: $uni-base-color;
			}
			.blueBtn {
				background: $xxf-blue;
			}
		}
	}
}
